<template>
	<view>
		<!-- <view class="page"  :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'"> -->
		<view class="page" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'">
			<view class="top" :style="`padding-top:`+$store.state.StatusBar.statusBar + `px`">
				<view v-if="isWXflag==true" style="height: 100rpx;"></view>
				<view class="top-icon" @click="back">
					<image class="img"
						src="$c.config.imageIP + 'yuemini/ic_back.png"
						mode="aspectFill"></image>
				</view>
				<view class="top-title">{{title}}</view>
			</view>
			<view style="height: 60rpx;"></view>
			<view class="body">
				<scroll-view scroll-y="true" class="scr"
					:style="{height:pageheigh-$store.state.StatusBar.statusBar-80+`px`}">
					<view class="list">
						<view class="flex_r fa_c item" v-for="(item,index) in list">
							<image class="image" mode="aspectFill" :src="item.image"></image>
							<view style="position:absolute; top:30px; left:230rpx;">{{item.diamonds}}</view>
							<view style="position:absolute; top:60px; left:230rpx; color: #999; font-size:20rpx;">
								花费{{item.goldCoin}}金币</view>
							<view class="time">{{item.createTime}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				$c: this.$c,
				isWXflag: false,
				pageheigh: 0,
				title: '',
				pageno: 1,
				list: []
			}
		},
		onReachBottom() {
			this.getList()
		},
		onLoad(option) {
			// #ifdef MP-WEIXIN
			this.isWXflag = true;
			// #endif
		},
		onShow(option) {
			this.pageheigh = uni.getSystemInfoSync().windowHeight;

			uni.onWindowResize((res) => {
				this.pageheigh = res.size.windowHeight;
			});
			this.pageno = 1;
			this.list = [];
			this.getList();
			this.title = '兑换记录'
		},
		methods: {
			to,
			back() {
				to()
			},
			async getList() {
				let res = await this.$c.post("/app/exchange/exchangeLog")
				if (res.code == 0) {
					this.list = this.list.concat(res.data)
					this.pageno++;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}

	.top {
		position: fixed;
		top: 0rpx;
		width: 100%;
		// background-color: #e3ecfb;
		z-index: 999;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx;
	}

	.top-icon {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 30rpx;
		height: 30rpx;
	}

	.top-title {
		line-height: 50rpx;
		display: block;
		height: 50rpx;
		z-index: 99;
		color: #fff;
	}

	.body {
		padding-top: 40rpx;
	}

	.list {
		padding: 20rpx;
		padding-left: 2%;
		padding-right: 2%;
	}

	.item {
		width: 96vw;
		height: 200rpx;
		background-color: #e3ecfb;
		border-radius: 20rpx;
		position: relative;
		margin-top: 20rpx;

		.image {
			width: 220rpx;
			height: 220rpx;
		}

		.time {
			position: absolute;
			right: 10%;
			font-size: 22rpx;
			color: #c3bbff;
		}

		.title {
			margin-top: 20rpx;
			font-size: 28rpx;
		}

		.bottom {
			margin-top: 20rpx;
			font-size: 24rpx;
			padding-top: 20rpx;
			border-top: 1px solid #bdbdbd;
		}

		.item-infr {
			.item-infr-top {}

			.item-infr-top-img {
				width: 40rpx;
				height: 40rpx;
				overflow: hidden;
				border-radius: 50%;
				margin-left: 20rpx;
			}
		}

		.item-button {
			box-sizing: border-box;
			padding: 0 20rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 25rpx;
			background-color: #e8e1e8;
		}

		.item-button_ {
			box-sizing: border-box;
			padding: 0 20rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 25rpx;
			background-image: linear-gradient(to right, rgba(230, 22, 106, 0.3), #e6166a);

			.item-button_icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 6rpx;
			}
		}

	}
</style>